<template>
  <div class="bor">
    <div class="relation">
      <div class="btnQuery">
        <el-input v-model="searchVal" placeholder="最少输入3个字符" class="searchWidth">
          <el-button slot="append" icon="el-icon-search" @click="getList" @key.enter.up="getList"></el-button>
        </el-input>
        <el-dropdown>
          <span class="el-dropdown-link">
            更多<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>复制</el-dropdown-item>
            <el-dropdown-item>粘贴</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div class="btnGroups">
        <el-radio-group v-model="radioGroupVal" @change="radioGroupChange">
          <el-tooltip
            v-for="(item, index) in radioGroupList"
            :key="index"
            :content="item.tooltipContent"
            placement="top"
          >
            <el-radio-button :label="item.value" :disabled="['02','03'].includes(item.value) && multiRelation.length === 0">
              <i class="iconfont" :class="item.icon"></i>
            </el-radio-button>
          </el-tooltip>
        </el-radio-group>
      </div>
    </div>
    <el-table v-loading="loading" :data="tableData" @selection-change="handleSelectionChange1">
      <el-table-column type="selection"></el-table-column>
      <el-table-column
        v-for="(item,index) in tableColum"
        :key="index"
        :prop="item.prop"
        :label="item.label"
        :min-width="item.minWidth"
        :show-overflow-tooltip="true"
        :default-sort="{prop: 'name'}"
      ></el-table-column>
    </el-table>
    <el-dialog
      ref="relationDialog"
      class="dialog-wrap"
      title="添加关系"
      width="660px"
      :visible="relaDialog"
      @close="rdCancel"
    >

      <div class="el-dialog-div">
        <el-select
          v-model="selectVal"
          class="select"
          placeholder="请选择"
          @change="changeAddList"
        >
          <el-option
            v-for="(item, index) in searchTypeList"
            :key="index"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-input
          v-model="searchVal"
          placeholder="输入名称/描述，至少输入3位字符"
          class="search"
        >
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="getMaterialList"
          ></el-button>
        </el-input>
        <el-table :data="dialogTable" :max-height="tableHeight" @row-dblclick="rdSubmit">
          <el-table-column
            v-for="(item,index) in tableColum1"
            :key="index"
            :prop="item.prop"
            :label="item.label"
            :min-width="item.minWidth"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <template v-if="item.prop==='objectType'"><span v-if="scope.row[item.prop]==='1'">物料</span>
                <span v-if="scope.row[item.prop]==='2'">文档</span></template>
              <template v-else>{{ scope.row[item.prop] }}</template>
            </template>

          </el-table-column>
        </el-table>
      </div>
    </el-dialog></div>

</template>

<script>
import autoTableHeight from '@/utils/autoTableHeight.js'
import { queryMaterial, addRelation, queryList, dels } from '@/api/frontPage/public'
export default {
  name: 'Relation',
  components: {
  },
  props: {
    id: {
      type: String,
      default: '344b724e63a236e9390c2cf09337ce2f'
    },
    workspaceId: {
      type: String,
      default: '1a984659fc3aa90193bb65ae4146289b'
    }
  },
  data() {
    return {
      delStatus: false,
      addType: '1',
      searchVal: '',
      multiRelation: [],
      tableHeight: autoTableHeight(450),
      relaDialog: false,
      searchTypeList: [
        { label: '物料',
          value: '1' },
        {
          label: '文档',
          value: '2'
        }
      ],
      selectVal: '1',
      tableColum1: [
        {
          prop: 'instanceNumber',
          label: '编码',
          minWidth: '120'
        },
        {
          prop: 'name',
          label: '名称',
          minWidth: '80'
        },
        {
          prop: 'description',
          label: '描述',
          minWidth: '150'
        },
        {
          prop: 'objectType',
          label: '类型',
          minWidth: '50'
        }
      ],
      dialogTable: [],
      total: 0,
      pageSize: 10,
      pageNo: 1,
      loading: false,
      radioGroupVal: '',
      radioGroupList: [
        {
          tooltipContent: '添加',
          value: '01',
          icon: 'iconicon_add'
        },
        {
          tooltipContent: '删除',
          value: '02',
          icon: 'iconicon_trash'
        },
        {
          tooltipContent: '粘贴',
          value: '03',
          icon: 'iconniantie'
        }
      ],
      tableColum: [
        {
          prop: 'code',
          label: '编号',
          minWidth: '100'
        },
        {
          prop: 'description',
          label: '描述',
          minWidth: '100'
        },
        {
          prop: 'type',
          label: '类型',
          minWidth: '50'
        },
        {
          prop: 'status',
          label: '状态',
          minWidth: '50'
        },
        {
          prop: 'regulation',
          label: '规则',
          minWidth: '100'
        },
        {
          prop: 'remarks',
          label: '备注',
          minWidth: '100'
        }
      ],
      tableData: []
    }
  },
  created() {
    this.getList()
  },
  mounted() {
    window.onresize = () => {
      this.tableHeight = autoTableHeight(450)
    }
  },
  methods: {
    changeAddList() {
      if (this.selectVal === '1') {
        this.addType = '1'
        this.getMaterialList()
      } else {
        this.addType = '0'
        this.getMaterialList()
      }
    },
    handleSelectionChange1(val) {
      this.multiRelation = val
      console.log('111', this.multiRelation)
    },
    getRelationIds() {
      const ids = []
      this.multiRelation.forEach((item, index) => {
        ids.push(item.id)
      })
      return ids
    },
    getList() {
      const params = {
        description: this.searchVal,
        objectInstanceId: this.id
      }
      queryList(params).then(res => {
        this.tableData = res.result
      })
    },
    delRelation() {
      const ids = this.getRelationIds()
      dels(ids).then(res => {
        this.$message({
          type: 'success',
          message: '删除成功'
        })
        this.getList()
      })
    },
    getMaterialList(value) {
      const params = {
        workspaceId: this.workspaceId,
        objectType: this.addType,
        search: this.searchVal
      }
      queryMaterial(params).then(res => {
        this.dialogTable = res.result
        this.total = res.result.total
      })
    },
    radioGroupChange(val) {
      switch (val) {
        case '01':
          this.relaDialog = true
          this.getMaterialList()
          break
        case '02':
          this.delRelation()
          this.getList()
          this.radioGroupVal = ''
          break
        case '03':
          break
        case '04':
          break
      }
    },
    rdSubmit(item) {
      const params = {
        objectInstanceId: this.id,
        relationInsId: item.id
      }
      addRelation(params).then(res => {
        if (res.code === 200) {
          this.$message({
            type: 'success',
            message: '添加成功'
          })
          this.getList()
        }
      })
    },
    rdCancel() {
      this.radioGroupVal = ''
      this.relaDialog = false
    }
  }
}
</script>

<style lang="scss" scoped>
.bor {
  border: 1px solid #eff2f7;
  .relation {
    display: flex;
    justify-content: space-between;
    .btnGroups {
      margin-right: 12px;
    }
  }
}

.searchWidth {
  width: 240px;
  margin: 17px 25px 16px 12px;
}
.el-radio-button {
  margin: 17px 0px 16px 0px;
  border: none;
  .el-radio-button__inner {
    .iconfont {
      font-size: 12px;
    }
  }
}
.select{
  width: 80px;
  margin-bottom: 16px;
  margin-right: 10px;
}
.search{
  width: 288px;
}

.el-dialog-div{
    height: calc(100vh - 340px);
     overflow: auto;
    }
  // 滚动条的宽度
  ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
    height: 6px; // 纵向滚动条 必写
    width: 4px;
  }
  // 滚动条的滑块
  ::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
        background: #EFF2F7;
    border-radius: 4px;
  }
    ::v-deep .el-table__body-wrapper::-webkit-scrollbar-track-piece {
        background: #fff;
  }
</style>
